{% extends "admin/layout.html" %}

{% block title %}编辑项目 - {{ super() }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">编辑项目: {{ project.name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ url_for('jira.project_detail', project_id=project.id) }}" class="btn btn-sm btn-outline-secondary me-2">
            <i class="fas fa-eye"></i> 查看详情
        </a>
        <a href="{{ url_for('jira.project_list') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> 返回列表
        </a>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <form method="post">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="name" class="form-label">项目名称 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ project.name }}" required>
                </div>
                <div class="col-md-6">
                    <label for="category_id" class="form-label">项目类别 <span class="text-danger">*</span></label>
                    <select class="form-select" id="category_id" name="category_id" required>
                        <option value="">-- 选择项目类别 --</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}" {% if project.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="level_id" class="form-label">项目级别 <span class="text-danger">*</span></label>
                    <select class="form-select" id="level_id" name="level_id" required>
                        <option value="">-- 选择项目级别 --</option>
                        {% for level in levels %}
                        <option value="{{ level.id }}" data-color="{{ level.color }}" {% if project.level_id == level.id %}selected{% endif %}>{{ level.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="first_approver_id" class="form-label">指定审批人 <span class="text-danger">*</span></label>
                    <select class="form-select" id="first_approver_id" name="first_approver_id" required>
                        <option value="">-- 选择审批人 --</option>
                        {% for approver in approvers %}
                        <option value="{{ approver.id }}" {% if project.first_approver_id == approver.id %}selected{% endif %}>{{ approver.name }} - {{ approver.department.name if approver.department }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12">
                    <label for="approval_flow_id" class="form-label">审批流程 <span class="text-danger">*</span></label>
                    <select class="form-select" id="approval_flow_id" name="approval_flow_id" required>
                        <option value="">-- 选择审批流程 --</option>
                        {% for flow in flows %}
                        <option value="{{ flow.id }}" {% if project.approval_flow_id == flow.id %}selected{% endif %}>{{ flow.name }} - {{ flow.department.name if flow.department else '通用' }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">项目描述</label>
                <textarea class="form-control" id="description" name="description" rows="3">{{ project.description }}</textarea>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="start_date" class="form-label">开始日期</label>
                    <input type="date" class="form-control" id="start_date" name="start_date"
                           value="{{ project.start_date.strftime('%Y-%m-%d') if project.start_date }}">
                </div>
                <div class="col-md-6">
                    <label for="end_date" class="form-label">结束日期</label>
                    <input type="date" class="form-control" id="end_date" name="end_date"
                           value="{{ project.end_date.strftime('%Y-%m-%d') if project.end_date }}">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">项目成员 <span class="text-danger">*</span></label>
                <div class="border rounded p-3">
                    <div class="row">
                        {% for user in users %}
                        <div class="col-md-4 mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="member_ids"
                                       value="{{ user.id }}" id="user_{{ user.id }}"
                                       {% if user.id in project.members|map(attribute='user_id') %}checked{% endif %}>
                                <label class="form-check-label" for="user_{{ user.id }}">
                                    {{ user.name }} - {{ user.department.name if user.department }}
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <small class="form-text text-muted">项目负责人将自动添加到成员列表中</small>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">保存更改</button>
                <a href="{{ url_for('jira.project_detail', project_id=project.id) }}" class="btn btn-secondary">取消</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 级别选择变化时预览颜色
    const levelSelect = document.getElementById('level_id');
    levelSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const color = selectedOption.getAttribute('data-color');
        if (color) {
            this.style.borderLeft = `4px solid ${color}`;
        } else {
            this.style.borderLeft = '';
        }
    });

    // 触发一次change事件以初始化样式
    levelSelect.dispatchEvent(new Event('change'));
});
</script>
{% endblock %}